<script>
import { useVModel } from "@vueuse/core";
import { provide } from "vue";

export default {
  name: 'Tabs',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    // 将默认的激活name更新为响应式数据
    const activeName = useVModel(props, 'modelValue', emit)
    // 给tabs-panel传值
    provide('activeName', activeName)

    //点击标签事件 - 发送点击标签信息
    const tabClick = (name, index) => {
      activeName.value = name
      emit('tab-click', { name, index })
    }


    return {
      activeName,
      tabClick
    }
  },
  render() {
    // jsx语法，它能够让我们创建节点和写html一样
    // 1. 动态插值表达式{} 2. 尽量三元表示式做判断，使用map来遍历 3.事件使用原始方式绑定
    // 默认插槽节点
    const panels = this.$slots.default()
    
    // 动态判断节点类型，组织tabs列表
    const dynamicPanels = []
    panels.forEach(item => {
      if (item.type.name === 'TabsPanel') {
        dynamicPanels.push(item)
      } else {
        // v-for 渲染的dom结构不相同
        item.children.forEach(e => {
          dynamicPanels.push(e)
        })
      }
    })

    // 选项卡的导航菜单结构 
    const nav = (
      <nav>
        {dynamicPanels.map((item, i) => {
          // 动态渲染每个Tab标签

          return (
            // 绑定激活状态,点击事件
            <a
              href="javascript:;"
              class={{ active: this.activeName == item.props.name }}
              onClick={() => this.tabClick(item.props.name, i)}
            >
              {item.props.label}
            </a>
          )
        })}
      </nav>
    )

    return <div class="tabs">{[nav, panels]}</div>
  }
}
</script>

<style lang="less">
.tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>